<template xmlns="http://www.w3.org/1999/html">
  <div>
    <Searchbar>
      <p>修改密码</p>
    </Searchbar>
    <el-radio-group v-model="labelPosition">
    </el-radio-group>
    <el-form ref="form" style="display: flex;flex-direction: column; /* 设置为垂直方向的列布局 */justify-content: center; align-items: center;height: 100vh; /* 可以根据需要设置容器高度 */"
             :label-position="labelPosition" :model="form" label-width="80px">
        <el-form-item label="原密码:" >
          <el-input type="password" placeholder="请输入原密码" v-model="form.oldPwd"></el-input>
        </el-form-item>
        <el-form-item  label="新密码:" >
          <el-input type="password" placeholder="请输入新密码(不少于六位)" v-model="form.newPwd"></el-input>
        </el-form-item>
        <el-form-item  label="确认密码:">
          <el-input type="password" placeholder="请输入确认密码" v-model="form.rePwd"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="resetPwd">立即修改</el-button>
        </el-form-item>

    </el-form>
  </div>
</template>
<script>
import {experimentModel} from "@/api/models";
import TableBar from "@/components/TableBar";
import Searchbar from "@/components/Searchbar";
import {Message} from "element-ui";
import {logout} from '@/api/models.js';
import requestConfig from "@/api/config";

export default {
  components: {TableBar, Searchbar},
  data() {
    return {
      labelPosition: 'left',
      form: {
        oldPwd: '',
        newPwd: "",
        rePwd: "",
      }
    };
  },
  created() {
  },
  methods: {
    resetPwd() {
      if (!this.form.oldPwd || !this.form.newPwd || !this.form.rePwd) {
        return Message.warning("请填完整信息");
      }
      if (this.form.newPwd.length < 6) {
        return Message.warning("密码不少于6位");
      }
      if (this.form.newPwd !== this.form.rePwd) {
        return Message.warning("两次输入密码不一致");
      }
      experimentModel.ReSetPassWord(
          this.form,
          res => {
            if (res.error_code === 0) {
              Message.success(res.message)
              setTimeout(function () {
                logout(() => {
                  location.href = requestConfig[process.env.NODE_ENV].loginPage
                })
              }, 3000);

            } else {
              return Message.warning(res.message);
            }
          },
          err => {
            console.log(err);
          }
      );
    }
  }
};
</script>
<style lang="scss">
.el-autocomplete-suggestion {
  width: auto !important;
}

.text-default span {
  color: orange;
}
</style>